<template>
  <view class="balance-page">
    <view class="summary">
      <text class="label">可用余额</text>
      <text class="value">¥{{ balance.balance }}</text>
      <text class="sub">冻结金额：¥{{ balance.frozen_balance }}</text>
    </view>

    <view class="actions">
      <button class="btn primary" @tap="withdraw">申请提现</button>
      <button class="btn" @tap="refresh">刷新</button>
    </view>
  </view>
</template>

<script setup>
// 中文注释：余额页面
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { userApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const balance = ref({ balance: '0.00', frozen_balance: '0.00' })

const fetchBalance = async () => {
  try {
    const data = await userApi.getBalance()
    balance.value = data || balance.value
  } catch (e) {
    proxy?.$showToast?.('加载失败')
  }
}

const refresh = () => fetchBalance()

const withdraw = () => {
  proxy?.$showToast?.('提现功能示例，未接入后端')
}

onLoad(() => fetchBalance())
</script>

<style scoped lang="scss">
.balance-page { padding: 32rpx; }
.summary { background: linear-gradient(90deg,#ff8a2b,#ff6b00); color: #fff; padding: 32rpx; border-radius: 16rpx; }
.label { font-size: 28rpx; opacity: .9; }
.value { display: block; margin-top: 12rpx; font-size: 48rpx; font-weight: 700; }
.sub { display: block; margin-top: 8rpx; font-size: 24rpx; opacity: .9; }
.actions { display: flex; gap: 16rpx; margin-top: 24rpx; }
.btn { flex: 1; height: 80rpx; line-height: 80rpx; border: none; border-radius: 12rpx; background: #f5f5f5; color: #333; font-size: 28rpx; }
.btn.primary { background: #ff6b00; color: #fff; }
</style>
